<template>
  <div class="flex-x video_toolbar">
    <el-tooltip
      placement="top"
      effect="light"
      popper-class="video_toolbar_icons"
    >
      <div slot="content" class="flex-x">
        <svg-icon
          icon-class="win1"
          style="margin-right: 10px"
          className="win_item"
          @click="arrangeWindow(1)"
        />
        <svg-icon
          className="win_item"
          icon-class="win2"
          style="margin-right: 10px"
          @click="arrangeWindow(2)"
        />
        <svg-icon
          className="win_item"
          style="margin-right: 10px"
          icon-class="win3"
          @click="arrangeWindow(3)"
        />
        <svg-icon
          class="win_item"
          icon-class="win4"
          @click="arrangeWindow(4)"
        />
      </div>
      <svg-icon
        :icon-class="iconName"
        style=" width: 20px;
    height: 20px;
    min-width: 20px;
    max-height: 20px;"
        className="win_item"
      />
    </el-tooltip>
    <!-- <span
          @click="$emit('fullScreen', -1)"
          class="el-icon-full-screen"
          style="color: #fff;"
        ></span> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      iconName: "win3"
    };
  },
  methods: {
    arrangeWindow(num) {
      this.iconName = "win" + num;
      this.$emit("arrangeWindow", num);
    }
  }
};
</script>

<style lang="scss">
.video_toolbar_icons {
  .win_item {
    display: block;
    width: 20px;
    height: 20px;
    min-width: 20px;
    max-height: 20px;
  }
}
</style>
